<template>
  <div class="goods-returns">
    <h3>退换货管理</h3>

    <!-- 筛选条件 -->
    <div class="filters">
      <el-select v-model="status" placeholder="选择状态">
        <el-option label="全部" value=""></el-option>
        <el-option label="待处理" value="pending"></el-option>
        <el-option label="已处理" value="processed"></el-option>
      </el-select>
      <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
    </div>

    <!-- 表格列表 -->
    <el-table :data="filteredReturns" style="width: 100%">
      <el-table-column prop="orderId" label="订单号"></el-table-column>
      <el-table-column prop="reason" label="退货原因"></el-table-column>
      <el-table-column label="凭证图片">
        <template #default="{ row }">
          <img :src="row.image" alt="凭证图" width="60" @click="previewImage(row.image)" />
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button size="small" @click="handleApprove(row)">通过</el-button>
          <el-button size="small" type="danger" @click="handleReject(row)">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 图片预览弹窗 -->
    <el-dialog v-model="showPreview" title="凭证图片">
      <img :src="previewUrl" alt="大图" style="width: 100%" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'

const returnsList = [
  { orderId: '20240901001', reason: '质量问题', image: 'https://via.placeholder.com/150', status: '待处理' },
  { orderId: '20240901002', reason: '发错货', image: 'https://via.placeholder.com/150', status: '已处理' }
]

const status = ref('')
const dateRange = ref([])
const showPreview = ref(false)
const previewUrl = ref('')

const filteredReturns = computed(() => {
  return status.value ? returnsList.filter(r => r.status === status.value) : returnsList
})

const handleApprove = (item) => {
  ElMessage.success(`已通过订单 ${item.orderId}`)
}

const handleReject = (item) => {
  ElMessage.error(`已拒绝订单 ${item.orderId}`)
}

const previewImage = (url) => {
  previewUrl.value = url
  showPreview.value = true
}
</script>